<template>
  <div>
    <hr>
    <p>Child01</p>
    <p>{{count}}</p>
    <p>{{text}}</p>
    <button @click="addOne2Count">普通调用 +5</button>
    <button @click="addOne2CountObj">对象风格提交 +5</button>
    <p>{{this.$store.getters.getCountBiggerThan20}}</p>
  </div>
</template>

<script>
  import { mapState } from "vuex"
  import { INCREMENT, DECREMENT, INCREMENT_OBJ } from "../../../store/mutation-types"
  import { mapMutations } from "vuex"

  // 直接用 this.$store.state  获取vuex属性

  export default {
    name: "Child01",
    computed: {
      ...mapState(["count","text"])
      // count() {
      //   // console.log(this.$store)
      //   return this.$store.state.count
      // },
      // text() {
      //   return this.$store.state.text
      // }
    },
    methods: {
      ...mapMutations([
        INCREMENT, DECREMENT, INCREMENT_OBJ
      ]),
      addOne2Count() {
        this.INCREMENT(5)
      },
      addOne2CountObj() {
        // this.$store.commit({
        //   type: INCREMENT_OBJ,
        //   num: 5
        // })
        this.INCREMENT_OBJ({
            // type: INCREMENT_OBJ,
            num: 5
        })
      }
    }
  }
</script>

<style scoped>

</style>
